<template>
	<view class="inform">
		<message ref="Message"></message>
		<view class="head">
			<view class="header" >
				<view class="statusBar" :style="{ height: statusBarHeight + 'PX'}"></view>
				<view class="content">
					<view class="back" @click="back">
						<image src="../../static/images/back.png" mode=""></image>
					</view>
					<view class="title">
						<text>公告消息通知</text>
					</view>
				</view>
				
			</view>
			<view class="swiperNavBar">
				<swiperNavBar
					:scrollIntoView="scrollIntoView"
					:swiperTabList='swiperTabList' 
					:swiperTabIdx='swiperTabIdx' 
					:currentSwiperWidth='currentSwiperWidth' 
					:currentSwiperHeight='currentSwiperHeight' 
					:swiperColor='swiperColor' 
					:swiperCurrentColor='swiperCurrentColor' 
					:currentSwiperLineShow="currentSwiperLineShow"
					:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
					:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
					:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
					:currentSwiperLineAnimatie="currentSwiperLineAnimatie"
					swiperFontSize="16px"
					v-if=" swiperTabList.length > 1 "
					@change="CurrentTab"
				></swiperNavBar>
			</view>
		</view>
		<!-- 公告 -->
		<uni-transition class="notice informitem" :show="swiperTabIdx == 0" mode-class="slide-left" :duration="500">
			<scroll-view :scroll-y="true" :style="{ height: informitemHeight + 'px'}">
				<view class="item">
					<view class="icon">
						<image src="/static/images/menu/notice.png" mode=""></image>
					</view>
					<view class="itemcontent">
						<view class="title">
							<text>我是标题</text>
							<text style="font-size: 10px;color: #32CCBC;margin-right: 10rpx;">{{ (1634799500) | timeForm }}</text>
						</view>
						<view class="text">
							我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题我是标题我是标题我是我是标题标题我是标题我是标题
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-transition>
		<!-- 通知 -->
		<uni-transition class="notice informitem" :show="swiperTabIdx == 1" mode-class="slide-right" :duration="500">
			<scroll-view :scroll-y="true" :style="{ height: informitemHeight + 'px'}">
				<view class="item" v-for="(item, index) in gbookList" :key="index" @click="feedbackItemClick(item.vod_id, item.gbook_reply)">
					<view class="icon">
						<image src="/static/images/menu/feedback.png" mode=""></image>
					</view>
					<view class="itemcontent">
					<view class="title">
						<text style="color: #EA5455">影片报错反馈</text>
						<text style="font-size: 10px;color: #32CCBC;margin-right: 10rpx;">{{ item.gbook_time | timeForm }}</text>
					</view>
					<view class="text">
						{{ item.gbook_content }}
					</view>
					<view class="reply" v-if="item.gbook_reply">
						管理员回复：{{ item.gbook_reply }}（<text>{{ item.gbook_reply_time | timeForm }}</text>）
					</view>
					</view>
				</view>
			</scroll-view>
		</uni-transition>
	</view>
</template>

<script>
	import { select } from '@/commons/querySelect.js'
	import swiperNavBar from '@/components/swiperNavBar/swiperNavBar.vue'
	export default {
		components: {
			swiperNavBar
		},
		data() {
			return {
				statusBarHeight: this.$systemInfo.statusBarHeight,
				// 导航条菜单参数
				scrollIntoView:0,
				swiperTabList:[ '系统公告','消息中心' ],
				swiperTabIdx:0,
				swiperFontSize: '25px',
				swiperCurrentFontSize: '20px',
				swiperColor:'#FFF',
				swiperCurrentColor:'#fff',
				currentSwiperWidth:'50%',
				currentSwiperHeight:70,
				mainHeight:200,
				currentSwiperLineShow:true,
				currentSwiperLineActiveBg:'#fff',
				currentSwiperLineActiveWidth:'50rpx', 
				currentSwiperLineActiveHeight:'8rpx',
				currentSwiperLineAnimatie: 300,
				swiperNavBarWidth: 300,
				
				informitemHeight: 0,
				// 报错数据
				gbookList: [],
				userInfo: {},
				newsParams: {
					// 要获取几条
					limit: 20,
					// 排序
					sort: 'desc',
					// 要跳过几条
					skip: 0,
				},
				newShasMore: true
			};
		},
		onLoad() {
			
			
		},
		async mounted() {
			const head = await select('.head')
			this.informitemHeight = this.$systemInfo.windowHeight - head.height - 10
			this.userInfo = getApp().globalData.userInfo
			this.getGbookList()
			
		},
		methods:{
			back() {
				uni.navigateBack()
			},
			//tab点击事件
			async CurrentTab(index,item){
				this.swiperTabIdx = index;
				this.scrollIntoView = Math.max(0, index - 1);
				switch(index) {
					case 0:
						
					break
					case 1:
						if (this.gbookList.length === 0) {
							this.$refs['Message'].info('没有提交记录')
							return
						}
					break
					default:
					
					break
					
				}
			},
			async getGbookList() {
				const self = this
				const { data: res} = await this.$http({
					url: 'http://192.168.0.105:3000/api/private/g1/user/getgbook',
					method: 'POST',
					data: {
						user_id: this.userInfo.user_id,
						...this.newsParams
					}
				})
				if (res.status !== 200) {
					return
				}
				if(res.data.result.length === 0) {
					this.newShasMore = false
					return
				}
				
				this.gbookList = [...this.gbookList, ...res.data.result]
				console.log(this.gbookList)
			},
			async feedbackItemClick(vod_id, gbook_reply) {
				if (!gbook_reply) {
					this.$refs['Message'].info('亲！还没有修复呢')
					return 
				}
				const { data: res } = await this.$http({
					url: this.$api.search,
					data: {
						vod_id
					}
				})
				if (res.status !== 200) {
					this.$refs['Message'].warn('没有找到该视频')
					return 
				}
				this.$goto('/pages/player/player', res.data.result[0])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inform {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}
	.head {
		background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
	}
	.header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 150rpx;
		
	}
	.swiperNavBar {

		height: 80rpx;
	}
	.content {
		flex: 1;
		display: flex;
	
		
		.back {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100%;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.title {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: -100rpx;
			color: #fff;
			
			text {
				font-weight: bold;
			}
			
		}
	}
	
	.informitem {
		padding: 10rpx;
		box-sizing: border-box;
		.item {
			display: flex;
			width: 94%;
			min-height: 150rpx;
			margin: 20rpx auto;
			padding: 10rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-sizing: border-box;
			.icon {
				display: flex;
				justify-content: center;
				width: 64rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.itemcontent {
				flex: 1;
				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;
					width: 100%;
					color: #000;
					font-size: 12px;
				}
				
				.text {
					width: 100%;
					margin-top: 5rpx;
					font-size: 10px;
					line-height: 150%;
				}
				
				.reply {
					width: 100%;
					margin-top: 5rpx;
					font-size: 12px;
					color: #28C76F;
				}
			}
		}
		
		
	}
	
	
</style>
